<template>
    <el-table :data="state.month_data" height="700"
    :default-sort="state.sort"
    @sort-change="sortChange"
    :cell-class-name="tableCellClassName"
    style="width: 100%">
        <el-table-column prop="date" label="日期1" sortable width="160">
            <template #default="scope">
                <DateOperationComponent :mdata="scope.row" />
            </template>
        </el-table-column>
        <el-table-column prop="close" label="价格"/>
        <el-table-column prop="drawdown" label="drawdown" sortable/>
        <el-table-column prop="monthPct" label="月涨跌" sortable/>
        <el-table-column prop="incNum" label="incNum" sortable width="100"/>
        <el-table-column prop="pctSum" label="涨幅和" sortable >
            <template #default="scope">
                {{ numberFormat(scope.row.pctSum, 2) }}
            </template>
        </el-table-column>
        <el-table-column prop="lp" label="分位点" sortable/>
        <el-table-column prop="lpDecrease" label="跌幅"/>
        <el-table-column prop="relLP" label="相对分位点" sortable />
        <el-table-column prop="gt1200d" label="gt1200d" sortable />
    </el-table>
</template>

<script setup>
// 个股周数据详情页
import { reactive, watch } from 'vue';
import { getMonthData } from '../service/month';
import { weekStockSearch } from '../stores/week'
import { storeToRefs } from 'pinia';
import { getIncNumClassName, getLpClassName, numberFormat } from '../utils/help';
import DateOperationComponent from './DateOperationComponent.vue';
import { useRouteQuery } from '../utils/useRoute';

const stockSearchStore = weekStockSearch()
let { input } = storeToRefs(stockSearchStore)

const sortPropKey = "monthStockDetailSortProp"
const sortOrderKey = "monthStockDetailSortOrder"

// 网址传参
let stock = useRouteQuery("stock","")
if(stock) {
    input.value = stock
}

const state = reactive({
    month_data: [],
    sort: { 
        prop: sessionStorage.getItem(sortPropKey) || 'date' , 
        order: sessionStorage.getItem(sortOrderKey) || 'descending' 
    }
})

// 只监听pinia中某一个值的变化
watch(() => input.value, (newValue, oldValue) => {
    loadData()
})

const loadData = () => {
    getMonthData(input.value).then(res => {
        state.month_data = res.data.reverse()
    })
}

loadData()

const sortChange = (column, prop, order) => {
    sessionStorage.setItem(sortPropKey, column.prop)
    sessionStorage.setItem(sortOrderKey, column.order)
}

const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {

    let columnProperty = column.property
    let val = row[columnProperty]

    if (["gt1200d", "monthPct","deSum","lpDecrease","pctSum"].includes(columnProperty)) {
        if (val < 0) {
            return 'lt0-cell'
        }
    }

    if (columnProperty == "lp") {
        return getLpClassName(val)
    }

    if (columnProperty == "incNum") {
        return getIncNumClassName(val)
    }

    if ((columnProperty == "relLP") && (val <= 1)) {
        return 'rellplt1-cell'
    }

    return ''
}
</script>